<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>商品装箱</title>
		<script type="text/javascript">
	var boxCode = "";
	var index = 0;
	var printBoxCode="";
	function ajaxCheckBackupTaskSkus(item) {
	    var skuId=item.value.trim().toUpperCase();
		$.ajax({
			type : 'post',
			url : '${ctx}/shippedBatch/ajaxCheckBackupTaskSkus',
			data : 'backupTaskCode=${shippedBatch.backupTaskCode}&skuId='+ skuId,
			dataType : 'json',
			success : function(data) {
				if (data.status == "1") {
				     setClass("success");
				     var tempString="";
				     var noBoxNumber=$("#noBoxNumber").html();
				     noBoxNumber=Number(noBoxNumber)+1;
				     $("#noBoxNumber").html(noBoxNumber);
				   if($("#box_"+skuId).length>0){
				      var skuNumber=$("#box_"+skuId).html();
				      skuNumber=Number(skuNumber);
				      $("#box_"+skuId).html(skuNumber+1);
				   }else{
				       tempString="<tr><td>"+skuId+"</td><td id=\"box_"+skuId+"\">1</td></tr>";
				       $("#noBoxCode").append(tempString);
				   }
				}else{
				   setClass("error");
				}
				$("#message").show();
				$("#content").html(skuId + ":" + data.content);
				$("#skuId").val("");
				$("#skuId").focus();
			},

			error : function() {
				alert("服务器错误！！！");
			}
		});
	}

	//生成箱子
	function ajaxCreateBox() {
		$.ajax({
					type : 'post',
					url : '${ctx}/shippedBatch/ajaxCreateBox',
					data : 'backupTaskCode=${shippedBatch.backupTaskCode}',
					dataType : 'json',
					success : function(data) {
					    $("#message").show();
						if (data.status == "1") {
						    setClass("success");
						    //修改标题的商品数量
						    var noBoxNumber=$("#noBoxNumber").html();
						    var boxNumber=$("#boxNumber").html();
						    noBoxNumber=Number(noBoxNumber);
						    boxNumber=Number(boxNumber);
						    $("#boxNumber").html(noBoxNumber+boxNumber);
						    $("#noBoxNumber").html(0);
						    
						    
							if (data.content.index == "1") {
								$("#createBox").hide();
								$("#putShippedBatch").show();
							}
							$("#content").html("箱子生成成功箱子编码为:" + data.content.boxCode);
							$("#skuId").val("");
							$("#skuId").focus();
							
							//修改已装箱商品数量
							    var skusLists=data.content.status.split(",");
							    for(var i=0;i<skusLists.length;i++){
							       var checkNumber = $("#check_" + skusLists[i]).html();
							       var realNumber = $("#real_" + skusLists[i]).html();
				             	   var skuNumber=$("#box_"+ skusLists[i]).html();
				                  
				                   skuNumber=Number(skuNumber);
				                   checkNumber=Number(checkNumber)+skuNumber;
				                   $("#check_" +  skusLists[i]).html(checkNumber);
				                   var content=$("#status_" + skusLists[i]).html();
				                   if(content=="全部封箱"){
				                     continue;
				                   }
				                   if (checkNumber == realNumber) {
						                $("#status_" + skusLists[i]).html("<span class=\"label label-success\">全部封箱</span>");
					                } else {
						                $("#status_" + skusLists[i]).html("<span class=\"label label-important\">还剩余(" + (realNumber - checkNumber) + ")件</span>");
					                }
							    }
								
							
							//增加箱子列表
							var tempStringBox = "<tr id=\""+data.content.boxCode+"\"><td>"
									+ data.content.boxCode + "</td>";
							if ("single" == data.content.type) {
								tempStringBox += "<td>单件</td>";
							} else {
								tempStringBox += "<td>多件</td>";
							}
							tempStringBox += "<td id=\""+data.content.boxCode+"1\">"
									+ data.content.skuQty
									+ "</td><td id=\""+data.content.boxCode+"2\">"
									+ data.content.skuType
									+ "</td><td><a href=\"#reduceSkus\" role=\"button\" data-toggle=\"modal\" class=\"btn\""
									+ "onclick=\"initParams('"
									+ data.content.boxCode
									+ "',1)\">新增商品</a>"
									+ "<a href=\"#reduceSkus\" role=\"button\" data-toggle=\"modal\" class=\"btn\""
									+ "onclick=\"initParams('"
									+ data.content.boxCode
									+ "',0)\">减少商品</a><a href=\"#selextPrinter\" role=\"button\" data-toggle=\"modal\" class=\"btn\""+
									" onclick=\"initPrinter('"+data.content.boxCode+"')\">打印箱子编码</a></td></tr>";
							$("#boxCodeTBody").append(tempStringBox);
							$("#noBoxCode").html("");
						} else {
						    setClass("error");
							$("#content").html(data.content);
							$("#skuId").val("");
							$("#skuId").focus();
						}

					},

					error : function() {
						alert("服务器错误！！！");
					}
				});
	}
	
	
	//生成箱子
	function ajaxKeyCreateBox() {
		$.ajax({
					type : 'post',
					url : '${ctx}/shippedBatch/ajaxKeyCreateBox',
					data : 'backupTaskCode=${shippedBatch.backupTaskCode}',
					dataType : 'json',
					success : function(data) {
					    $("#message").show();
						if (data.status == "1") {
						    setClass("success");
						    //修改标题的商品数量
						    var noBoxNumber=$("#noBoxNumber").html();
						    var boxNumber=$("#boxNumber").html();
						    noBoxNumber=Number(noBoxNumber);
						    boxNumber=Number(boxNumber);
						    $("#boxNumber").html(noBoxNumber+boxNumber);
						    $("#noBoxNumber").html(0);
						    
						    
							if (data.content.index == "1") {
								$("#createBox").hide();
								$("#putShippedBatch").show();
							}
							$("#content").html("箱子生成成功箱子编码为:" + data.content.boxCode);
							$("#skuId").val("");
							$("#skuId").focus();
							
							//修改已装箱商品数量
							    var skusLists=data.content.status.split(",");
							    for(var i=0;i<skusLists.length;i++){
							       var checkNumber = $("#check_" + skusLists[i]).html();
							       var realNumber = $("#real_" + skusLists[i]).html();
				             	   var skuNumber=$("#box_"+ skusLists[i]).html();
				                  
				                   skuNumber=Number(skuNumber);
				                   checkNumber=Number(checkNumber)+skuNumber;
				                   $("#check_" +  skusLists[i]).html(checkNumber);
				                   var content=$("#status_" + skusLists[i]).html();
				                   if(content=="全部封箱"){
				                     continue;
				                   }
				                   if (checkNumber == realNumber) {
						                $("#status_" + skusLists[i]).html("<span class=\"label label-success\">全部封箱</span>");
					                } else {
						                $("#status_" + skusLists[i]).html("<span class=\"label label-important\">还剩余(" + (realNumber - checkNumber) + ")件</span>");
					                }
							    }
								
							
							//增加箱子列表
							var tempStringBox = "<tr id=\""+data.content.boxCode+"\"><td>"
									+ data.content.boxCode + "</td>";
							if ("single" == data.content.type) {
								tempStringBox += "<td>单件</td>";
							} else {
								tempStringBox += "<td>多件</td>";
							}
							tempStringBox += "<td id=\""+data.content.boxCode+"1\">"
									+ data.content.skuQty
									+ "</td><td id=\""+data.content.boxCode+"2\">"
									+ data.content.skuType
									+ "</td><td><a href=\"#reduceSkus\" role=\"button\" data-toggle=\"modal\" class=\"btn\""
									+ "onclick=\"initParams('"
									+ data.content.boxCode
									+ "',1)\">新增商品</a>"
									+ "<a href=\"#reduceSkus\" role=\"button\" data-toggle=\"modal\" class=\"btn\""
									+ "onclick=\"initParams('"
									+ data.content.boxCode
									+ "',0)\">减少商品</a><a href=\"#selextPrinter\" role=\"button\" data-toggle=\"modal\" class=\"btn\""+
									" onclick=\"initPrinter('"+data.content.boxCode+"')\">打印箱子编码</a></td></tr>";
							$("#boxCodeTBody").append(tempStringBox);
							$("#noBoxCode").html("");
						} else {
						    setClass("error");
							$("#content").html(data.content);
							$("#skuId").val("");
							$("#skuId").focus();
						}

					},

					error : function() {
						alert("服务器错误！！！");
					}
				});
	}

	function ajaxPutShippedBatch() {
		$.ajax({
			type : 'post',
			url : '${ctx}/shippedBatch/ajaxPutShippedBatch',
			data : 'backupTaskCode=${shippedBatch.backupTaskCode}',
			dataType : 'json',
			success : function(data) {
			  if(data.status=="1"){
			     setClass("success");
			  }else{
			     setClass("error");
			  }
			    $("#message").show();
				$("#content").html(data.content);
				$("#skuId").val("");
				$("#skuId").focus();

			},

			error : function() {
				alert("服务器错误！！！");
			}
		});
	}

	function ajaxChangeSkus() {
		var skuId = $("#reduceSkuId").val().trim().toUpperCase();
		$.ajax({
			type : 'post',
			url : '${ctx}/backupTask/ajaxChangeBoxCodeSkus',
			data : 'boxCode=' + boxCode + '&skuId=' + skuId + '&index=' + index
					+ '&backupTaskCode=${shippedBatch.backupTaskCode}',
			dataType : 'json',
			success : function(data) {
			    $("#message").show();
				if (data.status == "1") {
				    setClass("success");
					$("#" + boxCode + "1").html(data.content.skuQty);
					$("#" + boxCode + "2").html(data.content.skuType);
					$("#content").html("箱子商品变更成功");
					var checkNumber = $("#check_" + skuId).html();
					var realNumber = $("#real_" + skuId).html();
					var boxNumber=$("#boxNumber").html();
					boxNumber=Number(boxNumber);
					if (index == 1) {
						checkNumber = Number(checkNumber) + 1;
						boxNumber=boxNumber+1;
					} else if (index == 0) {
						checkNumber = Number(checkNumber) - 1;
						boxNumber=boxNumber-1;
					}
					$("#boxNumber").html(boxNumber);
					realNumber = Number(realNumber);
					$("#check_" + skuId).html(checkNumber);
					 if (checkNumber == realNumber) {
						 $("#status_" + skuId).html("<span class=\"label label-success\">全部装箱</span>");
					 } else {
						 $("#status_" + skuId).html("<span class=\"label label-important\">还剩余(" + (realNumber - checkNumber) + ")件</span>");
					 }
					 if(data.content.status=="2"){
					    $("#content").html(data.content.reserve);
					    $("#"+data.content.boxCode).hide();
					 }
					 
					 if (data.index == "1") {
						  $("#createBox").hide();
						  $("#putShippedBatch").show();
				    }
				    
				     if (data.index == "-1") {
						  $("#createBox").show();
						  $("#putShippedBatch").hide();
				    }

				}else {
				     setClass("error");
					$("#content").html(data.content);
				}
			},

			error : function() {
				alert("服务器错误！！！");
			}
		});
	}

	function initParams(arg0, arg1) {
		index = arg1;
		boxCode = arg0;
	}
	
	function setClass(className){
	  $("#message").removeClass();
	  $("#message").attr("class", "alert alert-"+className);
	}
	
	function initPrinter(item) {
		printBoxCode = item;
		var indexLength = getPrinterCount();
		var tempString = "";
		for ( var i = 0; i < indexLength; i++) {
			var name = getPrinterName(i);
			tempString += "<option value='"+name+"'>" + name + "</option>";
		}
		$("#printerBody").html(tempString);
	}

	//获得打印机的个数
	function getPrinterCount() {
		LODOP = getLodop(document.getElementById('LODOP_OB'), document
				.getElementById('LODOP_EM'));
		return LODOP.GET_PRINTER_COUNT();
	};

	//根据打印机序号获得打印机名称
	function getPrinterName(iPrinterNO) {
		LODOP = getLodop(document.getElementById('LODOP_OB'), document
				.getElementById('LODOP_EM'));
		return LODOP.GET_PRINTER_NAME(iPrinterNO);
	};
	
	function printExpressBoxCode() {
	   var printName=$("#printerBody").val();
		LODOP = getLodop(document.getElementById('LODOP_OB'), document
				.getElementById('LODOP_EM'));
		LODOP.PRINT_INIT(printBoxCode);
		LODOP.SET_PRINT_PAGESIZE(1, 600, 320, "");
		LODOP.ADD_PRINT_BARCODE(25, 10, 200, 45, "128A", printBoxCode);
		if (LODOP.SET_PRINTER_INDEXA(printName)) {
			LODOP.PRINT();
		}
	}
</script>

	</head>

	<body>
		<div id="message" class="alert alert-success" style="display: none;">
			<span id="content"></span>
		</div>

		<div class="span12">
			<table class="table table-striped table-bordered table-condensed">
				<thead>
					<tr>
						<th>
							编号
						</th>
						<th>
							生成日期
						</th>
						<th>
							处理日期
						</th>
						<th>
							订单数量
						</th>
						<th>
							商品数量
						</th>
						<th>
							商品种类
						</th>
						<th>
							类别
						</th>
						<th>
							操作人
						</th>
						<th>
							状态
						</th>

					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							${shippedBatch.backupTaskCode }
						</td>
						<td>
							${shippedBatch.createDate }
						</td>
						<td>
							${shippedBatch.updateDate }
						</td>
						<td>
							${shippedBatch.ordenoQty }
						</td>
						<td>
							${shippedBatch.skuQty }
						</td>
						<td>
							${shippedBatch.skuType }
						</td>
						<td>
							<c:if test="${shippedBatch.type eq 'single' }">
							     单件
							</c:if>
							<c:if test="${shippedBatch.type eq 'multiple' }">
							  多件
							</c:if>
						</td>
						<td>
							${shippedBatch.username }
						</td>
						<td>
							<c:if test="${shippedBatch.boxStatus eq 'finish' }">
							       装箱完成
							</c:if>
							<c:if test="${shippedBatch.boxStatus eq 'pending' }">
								装箱未完成
							</c:if>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div class="span12 alert">
				<div class="input-prepend">
             <span class="add-on"><i class="icon-barcode"></i></span>
               <input class="span2" id="skuId" type="text" placeholder="请扫描商品" onchange="ajaxCheckBackupTaskSkus(this)" readonly="readonly">
               <button type="button" onclick="ajaxKeyCreateBox()" class="btn" style='margin-left: 20px;'>一键装箱</button>
                
               </div>
		</div>
		<script type="text/javascript">
	        $("#skuId").focus();
        </script>
		<div class="span12" style="height: 300px;overflow: auto;">
			<div class="span4">
			  <div class='label label-inverse' style='font-size: 15px;padding: 8px;'>点数明细(<span id="noBoxNumber" style='color:#397;padding:4px;'>${noBoxNumber }</span>)</div>
				<!--<a href="javascript:ajaxCreateBox();" class="btn btn-success" id="createBox">开始封箱</a>-->
				
				<a href="javascript:void();" class="btn btn-success" id="createBox">开始封箱</a>
				<a href="javascript:ajaxPutShippedBatch();" class="btn btn-danger"
					style="display: none;" id="putShippedBatch">同步出库</a>
			  
				<table 
					class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th>
								商品编码
							</th>
							<th>
								商品数量
							</th>
				
						</tr>
					</thead>
					<tbody id="noBoxCode">
						<c:forEach items="${shippedBoxSkusLists}" var="obj">
							<tr>
								<td>
									${obj.skuId}
								</td>
								<td id="box_${obj.skuId}">
									${obj.realQty}
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
			<div class="span8">
			<div class='label label-inverse' style='font-size: 15px;padding: 8px;'>装箱明细(<span id="boxNumber" style='color:#397;padding:4px;'>${boxNumber }</span>)</div>
				<table 
					class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th>
								商品编码
							</th>
							<th>
								商品数量
							</th>
							<th>
								已装数量
							</th>
							<th>
								状态
							</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${backupTaskSkus}" var="obj">
							<tr>
								<td>
									${obj.skuId}
								</td>
								<td id="real_${obj.skuId}">
									${obj.realQty}
								</td>
								<td id="check_${obj.skuId}">
									${obj.checkQty}
								</td>
				                <td id="status_${obj.skuId}">
									<c:if test="${obj.realQty eq  obj.checkQty}">
									        <span class="label label-success"> 全部装箱</span> 
									</c:if>
									<c:if test="${obj.realQty ne  obj.checkQty}">
									       <span class="label label-important">  剩余  (${obj.realQty -  obj.checkQty})  件</span>
									</c:if>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
			</div>
			<div class="span12" style="height: 300px;overflow: auto;">
			<div class='label label-inverse' style='font-size: 15px;padding: 8px;'>封箱列表</div>
				<table class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th>
								箱子编码
							</th>
							<th>
								箱子类型
							</th>
							<th>
								商品数量
							</th>
							<th>
								商品种类
							</th>
							<th>
								操作
							</th>
						</tr>
					</thead>
					<tbody id="boxCodeTBody">
						<c:forEach items="${shippedBoxs }" var="object">
							<tr id="${object.boxCode }">
								<td>
									${object.boxCode }
								</td>
								<td>
									<c:if test="${object.type eq 'single' }">单件</c:if>
									<c:if test="${object.type eq 'multiple' }">多件</c:if>
								</td>
								<td id="${object.boxCode }1">
									${object.skuQty }
								</td>
								<td id="${object.boxCode }2">
									${object.skuType }
								</td>
								<td>
									<a href="#reduceSkus" role="button" data-toggle="modal"
										class="btn "
										onclick="initParams('${object.boxCode }',1)">新增商品</a>
									<a href="#reduceSkus" role="button" data-toggle="modal"
										class="btn "
										onclick="initParams('${object.boxCode }',0)">减少商品</a>
									<a href="#selextPrinter" role="button" data-toggle="modal"
									  class="btn "
									 onclick="initPrinter('${object.boxCode}')">打印箱子编码</a>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		
		<div style="display: none; width: 1000" class="modal hide fade"
			tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true" id="reduceSkus">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">
					×
				</button>
				<h3 id="printerNumber">
					箱子变更信息
				</h3>
			</div>
			<div class="modal-body">
				请扫描商品编码:
				<input type="text" id="reduceSkuId" />
			</div>
			<div class="modal-footer">
				<button class="btn" data-dismiss="modal" aria-hidden="true"
					id="printer" onclick="ajaxChangeSkus()">
					变更
				</button>

				<button class="btn" data-dismiss="modal" aria-hidden="true">
					关闭
				</button>
			</div>
		</div>
<div style="display: none; width: 1000" class="modal hide fade"
			tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true" id="selextPrinter">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">
					×
				</button>
				<h3 id="printerNumber">
					选择打印机
				</h3>
			</div>
			<div class="modal-body">
				<select id="printerBody" name="printerBody">
				</select>
			</div>
			<div class="modal-footer">

				<button class="btn" data-dismiss="modal" aria-hidden="true"
					id="printer" onclick="printExpressBoxCode()">
					开始打印
				</button>

				<button class="btn" data-dismiss="modal" aria-hidden="true">
					Close
				</button>
			</div>
		</div>
	</body>
</html>
